<template>
  <div>
    <i-row style="height: 50px;">
      <i-col span="24">
        <i-date-picker type="year" v-model="year"></i-date-picker>
      </i-col>
    </i-row>
    <i-row v-for="i in monthRows" :key="i">
      <i-col span="6" v-for="j in monthCols" :key="j">
        <i-card>
          <p slot="title">{{computeMonth(i, j).month}}月</p>
          <p>
            <i-row type="flex" justify="center" style="text-align: center;" :gutter="2" class-name="calendar-row">
              <i-col span="3" class-name="weekend">日</i-col>
              <i-col span="3">一</i-col>
              <i-col span="3">二</i-col>
              <i-col span="3">三</i-col>
              <i-col span="3">四</i-col>
              <i-col span="3">五</i-col>
              <i-col span="3" class-name="weekend">六</i-col>
            </i-row>
            <i-row type="flex" justify="center" v-for="x in dayRows" :key="x" style="text-align: center;" :gutter="2" class-name="calendar-row">
              <i-col span="3" v-for="y in dayCols" :key="y" :class-name="computeDayStyle(i, j, x, y)">
                <div class="calendar-cell" @click="toggleHoliday(i, j, x, y)">
                  {{computeDay(i, j, x, y).value.getDate()}}
                </div>
              </i-col>
            </i-row>
          </p>
        </i-card>
      </i-col>
    </i-row>
  </div>
</template>

<script>
import common from "@/common";

export default {
  name: "holiday-management",
  data: function() {
    return {
      monthRows: 3,
      monthCols: 4,
      dayRows: 6,
      dayCols: 7,
      year: new Date(),
      lastMonths: [],
      holidays: []
    };
  },
  created() {
    this.searchHolidays();
  },
  computed: {
    months() {
      let months = [];
      if (this.year) {
        for (let i = 0; i < 12; i++) {
          let current = new Date();
          current.setFullYear(this.year.getFullYear(), i, 1);
          let shift = current.getDay();
          current.setDate(current.getDate() - shift);

          let month = {
            month: i + 1,
            days: []
          };
          for (let j = 0; j < 42; j++) {
            let newDate = new Date();
            newDate.setTime(current.getTime());
            newDate.setDate(current.getDate() + j);

            let day = {
              value: newDate,
              isWeekend: newDate.getDay() === 0 || newDate.getDay() === 6,
              isCurrentMonth: newDate.getMonth() === i,
              isToday: this.isSameDay(newDate, new Date()),
              holiday: this.matchHoliday(newDate)
            };
            month.days.push(day);
          }

          months.push(month);
        }
        // TODO: delete ok?
        // this.lastMonths = months;
      } else {
        months = this.lastMonths;
      }

      return months;
    }
  },
  methods: {
    searchHolidays() {
      this.axios.get("/holidays").then(response => {
        if (response.code === 0) {
          this.holidays = response.data;
        } else {
          this.$Message.error("获取假期信息失败。" + response.message);
        }
      });
    },
    computeMonth(row, col) {
      return this.months[(row - 1) * this.monthCols + col - 1];
    },
    computeDay(mRow, mCol, dRow, dCol) {
      return this.computeMonth(mRow, mCol).days[
        (dRow - 1) * this.dayCols + dCol - 1
      ];
    },
    computeDayStyle(mRow, mCol, dRow, dCol) {
      const day = this.computeDay(mRow, mCol, dRow, dCol);

      let style = "";
      if (day.isWeekend) {
        style += "weekend ";
      }
      if (!day.isCurrentMonth) {
        style += "not-current-month ";
      }
      if (day.isToday) {
        style += "today ";
      }
      if (this.matchHoliday(day.value).id > 0) {
        style += "holiday ";
      }

      return style;
    },
    isSameDay(day1, day2) {
      return common.isSameDay(day1, day2);
    },
    matchHoliday(day) {
      let result = {
        id: 0
      };
      for (let index in this.holidays) {
        let holiday = new Date();
        holiday.setTime(this.holidays[index].holiday);
        if (this.isSameDay(holiday, day)) {
          result = this.holidays[index];
          break;
        }
      }
      return result;
    },
    toggleHoliday(mRow, mCol, dRow, dCol) {
      const day = this.computeDay(mRow, mCol, dRow, dCol).value;
      const id = this.matchHoliday(day).id;
      if (id > 0) {
        this.axios.delete("/holidays/" + id).then(response => {
          if (response.code === 0) {
            this.$Message.success("删除假期成功。");
            this.searchHolidays();
          } else {
            this.$Message.error("删除假期失败。" + response.message);
          }
        });
      } else {
        const holiday = {
          holiday:
            "" +
            day.getFullYear() +
            "-" +
            (day.getMonth() + 1) +
            "-" +
            day.getDate()
        };
        this.axios.post("/holidays", holiday).then(response => {
          if (response.code === 0) {
            this.$Message.success("创建假期成功。");
            this.searchHolidays();
          } else {
            this.$Message.error("创建假期失败。" + response.message);
          }
        });
      }
    }
  }
};
</script>

<style lang="less" scoped>
.weekend {
  background-color: #e9eaec;
}

.not-current-month {
  color: #bbbec4;
}

.today {
  color: #ed3f14;
}

.holiday {
  background-color: #5cadff;
}

.calendar-row {
  margin: 1px 0;
}

.calendar-cell {
  cursor: pointer;
}
</style>
